import { Radio, Input, Button, List, Popover, Tabs } from 'antd';
import { NavLink } from 'react-router-dom';
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { actions } from './store';
import { A, B } from './latest-thunk';

const filters = [
  { label: '全部', value: 'all' },
  { label: '已完成', value: 'completed' },
  { label: '未完成', value: 'uncompleted' },
];

const thunkToggle = (ind) => (dispatch) => {
  dispatch(actions.toggle(ind));
};
export default function TestStore() {
  const [hidden, setHidden] = useState(false);
  const dispatch = useDispatch();
  const filter = useSelector((state) => state.filter);
  const todoList = useSelector((state) => {
    // if (state.filter === 'completed') {
    //   return state.todoList.filter((e) => e.completed);
    // } else if (state.filter === 'uncompleted') {
    //   return state.todoList.filter((e) => !e.completed);
    // } else {
    return state.todoList;
    // }
  });

  const [todoText, setTodoText] = useState('');

  const changeFilter = (e) => {
    dispatch(actions.setFilter(e.target.value));
  };

  const changeTodoText = (e) => {
    setTodoText(e.target.value);
  };

  const clickAddTodo = () => {
    dispatch(actions.add(todoText));
    setTodoText('');
  };

  const toggleTodo = (ind) => {
    dispatch(thunkToggle(ind));
  };

  return (
    <div style={{ margin: '100px' }}>
      <div style={{ paddingBottom: 18 }}>
        <Input placeholder="Input TODO here !" style={{ width: 200 }} value={todoText} onChange={changeTodoText} />
        <Button type="primary" onClick={clickAddTodo} disabled={!todoText.trim()}>
          确定
        </Button>
      </div>
      <Radio.Group style={{ paddingBottom: 18 }} options={filters} onChange={changeFilter} value={filter} />
      <Button onClick={() => dispatch(A())}>Test A</Button>
      <Button onClick={() => dispatch(B())}>Test B</Button>
      <div style={{ background: '#efc', padding: 14, borderRadius: 4 }}>
        <List
          dataSource={todoList}
          split={false}
          renderItem={(item, i) => (
            <List.Item>
              <Radio checked={item.completed} onClick={() => toggleTodo(i)}>
                {item.text}
              </Radio>
            </List.Item>
          )}
        ></List>
      </div>
      <div className={'wrapper ' + (hidden ? 'hide-wrapper' : '')}>
        <Popover
          content={
            <div>
              点击跳转就会跳转到其他路由 <br />
              <NavLink to="/select">路由跳转</NavLink>
              <br />
              <Button
                type="link"
                onClick={() => {
                  const div = document.querySelector('#fixHighest');
                  div.style.display = 'block';
                  // setHidden(true);
                  setTimeout(() => {
                    // setHidden(false);
                    div.style.display = 'none';
                  }, 1000);
                }}
              >
                隐藏跳转
              </Button>
            </div>
          }
          title="PPP测试测试"
          trigger={'click'}
          getPopupContainer={(e) => e.parentElement}
        >
          <Button>Popover 测试</Button>
        </Popover>
      </div>
      <div id="fixHighest" style={{ display: 'none', position: 'fixed', inset: 0, zIndex: 9999999 }}></div>
    </div>
  );
}
